<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';

// 定义表单数据
const loginForm = reactive({
  username: '',
  password: ''
});

// 表单验证错误
const errors = reactive({
  username: '',
  password: '',
  general: ''
});

// 加载状态
const isLoading = ref(false);

// 密码可见性控制
const passwordVisible = ref(false);

const togglePasswordVisibility = () => {
  passwordVisible.value = !passwordVisible.value;
};

// 获取路由器实例和auth store
const router = useRouter();
const authStore = useAuthStore();

// 定义emit以便通知父组件登录成功
const emit = defineEmits(['login-success']);

// 验证表单
const validateForm = () => {
  let isValid = true;
  
  // 重置错误
  errors.username = '';
  errors.password = '';
  errors.general = '';
  
  // 验证用户名
  if (!loginForm.username) {
    errors.username = '请输入用户名';
    isValid = false;
  } else if (loginForm.username.length < 3) {
    errors.username = '用户名长度不能少于3个字符';
    isValid = false;
  }
  
  // 验证密码
  if (!loginForm.password) {
    errors.password = '请输入密码';
    isValid = false;
  } else if (loginForm.password.length < 6) {
    errors.password = '密码长度不能少于6位';
    isValid = false;
  }
  
  return isValid;
};

// 处理登录表单提交
const handleLogin = async () => {
  if (!validateForm()) return;
  
  try {
    // 调用store中的登录方法
    const result = await authStore.login({
      username: loginForm.username,
      password: loginForm.password
    });
    
    if (result.success) {
      console.log('登录成功，用户信息：', authStore.userInfo);
      
      // 通知父组件登录成功
      emit('login-success', authStore.userInfo);
      
      // 跳转到首页
      router.push('/');
    } else {
      // 显示错误信息
      errors.general = result.message;
    }
  } catch (error) {
    console.error('登录出错:', error);
    errors.general = '登录过程中发生错误，请稍后再试';
  }
};
</script>

<template>
  <form @submit.prevent="handleLogin" class="login-form">
    <!-- 一般错误信息 -->
    <div v-if="errors.general" class="error-message general">
      <i class="fas fa-exclamation-circle"></i> {{ errors.general }}
    </div>
    
    <!-- 用户名输入框 -->
    <div class="form-group">
      <label for="username" class="form-label">用户名</label>
      <div class="input-group">
        <i class="fas fa-user input-icon"></i>
        <input
          id="username"
          v-model="loginForm.username"
          type="text"
          class="form-input"
          placeholder="请输入用户名"
          :class="{ 'error': errors.username }"
        />
      </div>
      <p v-if="errors.username" class="error-message">{{ errors.username }}</p>
    </div>
    
    <!-- 密码输入框 -->
    <div class="form-group">
      <label for="password" class="form-label">密码</label>
      <div class="input-group">
        <i class="fas fa-lock input-icon"></i>
        <input
          id="password"
          v-model="loginForm.password"
          :type="passwordVisible ? 'text' : 'password'"
          class="form-input"
          placeholder="请输入密码"
          :class="{ 'error': errors.password }"
        />
        <i 
          :class="passwordVisible ? 'fas fa-eye' : 'fas fa-eye-slash'" 
          class="toggle-password"
          @click="togglePasswordVisibility"
        ></i>
      </div>
      <p v-if="errors.password" class="error-message">{{ errors.password }}</p>
    </div>
    
    <!-- 登录按钮 -->
    <button 
      type="submit" 
      class="login-button" 
      :disabled="isLoading"
    >
      <i v-if="isLoading" class="fas fa-spinner fa-spin"></i>
      <span v-else>登录</span>
    </button>
  </form>
</template>

<style scoped>
.login-form {
  width: 100%;
  height: 100%;
  max-height: none; /* 移除最大高度限制 */
  overflow-y: visible; /* 移除垂直滚动 */
  padding-right: 0; /* 移除为滚动条预留的空间 */
}

.form-group {
  margin-bottom: 15px; /* 增加表单项之间的间距 */
}

.form-label {
  display: block;
  margin-bottom: 5px; /* 增加标签与输入框之间的间距 */
  font-weight: 500;
  font-size: 0.9rem;
  color: #4B5563;
}

.input-group {
  position: relative;
}

/* 输入框左侧图标 */
.input-group .input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
}

/* 密码可见性切换图标 */
.input-group .toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  cursor: pointer;
  font-size: 16px;
  z-index: 2;
}

/* 隐藏浏览器自带的密码显示按钮 */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.form-input {
  width: 100%;
  padding: 12px 40px 12px 40px; /* 增加输入框内边距 */
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  background-color: #F9FAFB;
  height: 42px; /* 固定高度确保一致性 */
}

.form-input:focus {
  outline: none;
  border-color: #00c389;
  box-shadow: 0 0 0 3px rgba(0, 195, 137, 0.1);
  background-color: #fff;
}

.form-input::placeholder {
  color: #9CA3AF;
}

.form-input.error {
  border-color: #EF4444;
}

.error-message {
  color: #EF4444;
  font-size: 0.75rem; /* 缩小错误信息字体 */
  margin-top: 1px; /* 减少错误信息上方间距 */
}

.login-button {
  width: 100%;
  padding: 12px; /* 增加按钮内边距 */
  background-color: #ff5a5a;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 18px; /* 增加按钮上方间距 */
  height: 45px; /* 固定按钮高度 */
}

.login-button:hover {
  background-color: #ff3939;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 90, 90, 0.3);
}

.login-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (max-width: 576px) {
  .form-input {
    padding: 10px 40px 10px 36px;
    font-size: 14px;
  }
  
  .input-group .input-icon,
  .input-group .toggle-password {
    font-size: 14px;
  }
}

/* 移除自定义滚动条样式 */
.login-form::-webkit-scrollbar,
.login-form::-webkit-scrollbar-track,
.login-form::-webkit-scrollbar-thumb,
.login-form::-webkit-scrollbar-thumb:hover {
  display: none;
}

/* 添加一般错误信息样式 */
.error-message.general {
  background-color: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
</style> 